<template>
    <div id="background">
        <el-container>
            <el-header id="examIntroHead">
                <el-row type="flex" style="height:80%;display:flex;align-items: flex-end">
                       <el-col :xs="2" :sm="2" :md="2" :offset="1" class="imgCol">
                        <img v-bind:src="backIcon" class="backSize" @click="back"/>
                    </el-col>
                    <el-col :xs="6" :sm="6" :md="6" :offset="6" class="imgCol"> 
                        <span class="titleSize">{{ceShiName}}测试</span>
                    </el-col>
                 </el-row>
            </el-header>
            <el-main id="examIntroMain" >
                <el-row type="flex" >
                    <el-col class="imgCol">
                        <span class="examIntroTitle" >{{ceShiData.name}}</span>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :xs="23" :sm="23" :md="23" :offset="1" >
                        <span class="words">这是一段测试介绍：</span>
                    </el-col>
                </el-row>
                <el-scrollbar  class="introduceBox">
                    <span class="examIntro words">
                        {{ceShiData.introduction}}
                    </span>
                </el-scrollbar>
                <el-row type="flex" >
                    <el-col :xs="10" :sm="10" :md="10" :offset="1" >
                        <span class="words">测试时间：</span>
                    </el-col>
                    <el-col :xs="14" :sm="10" :md="10" >
                        <span class="words">{{this.ceShiHour}}小时{{this.ceShiMin}}分钟{{this.CeShiSec}}秒</span>
                    </el-col>
                </el-row>
            </el-main>
            <!-- <el-footer id="examIntroFoot" >
                <el-row type="flex">
                    <el-col class="imgCol">
                        <button class="btnexamIntro" @click="startExam">开始</button>
                    </el-col>
                </el-row>
            </el-footer> -->
            <el-footer>
                <el-row type="flex" class="imgCol" style="position:fixed;bottom:10px;width:100%;">
                    <button class="btnexamIntro" @click="startExam">开始</button>
                </el-row>
            </el-footer>
        </el-container>
    </div>
</template>
<script>
import backIcon from '../../../assets/img/mine/geRenZhongXin/back.png'
import { Toast } from 'vant';
export default {
    data(){
        return{
            //绑定测试的类型名称
            ceShiName:'',
            //绑定测试类型Id
            credentialId:'',
            ceShiData:{
                name:'暂无',
                introduction:'暂无'
            },
            ceShiHour:'00',
            ceShiMin:'00',
            CeShiSec:'00',
            backIcon:backIcon,
            normalHeight:document.documentElement.clientHeight,

        }
    },
    mounted(){
        this.ceShiName=this.$route.query.ceShiName;
        this.credentialId=this.$route.query.credentialId;

        this.getCeShiInfo();

        var normalHeight=sessionStorage.getItem('normalHeight');
        var bg = document.getElementById("background");
       // normalHeight=document.documentElement.clientHeight;
        console.log("height:"+normalHeight);
        bg.style.height = normalHeight+"px";
        bg.style.backgroundColor = "#FFFFFF"
        bg.style.margin = "0px";

        var head=document.getElementById("examIntroHead");
        var headHeight=normalHeight/30 *4 ;
        console.log("headHeight:"+headHeight);
        head.style.height=headHeight+"px";

        var main=document.getElementById("examIntroMain");
        var mainHeight=normalHeight/30 *22 ;
        console.log("mainHeight:"+mainHeight);
        main.style.height=mainHeight+"px";

        // var foot=document.getElementById("examIntroFoot");
        // var footHeight=normalHeight/30 *3 ;
        // console.log("footHeight:"+footHeight);
        // foot.style.height=footHeight+"px";
    },
    methods:{
        back(){
            console.log("back:");
            this.$router.go(-1);
        },
        startExam(){
            this.$router.push({
                path:'/tiKu/exam',
                query:{
                    time:this.ceShiData.timeLimit,
                    credentialId:this.ceShiData.credentialId,
                    testId:this.ceShiData.id,
                }
            })
        },
        //根据测试类型Id获取测试的信息
        getCeShiInfo(){
            var URL=this.IP.IP+'/test/randomTestInfoOfCredential';
            console.log(URL);
            this.$ajax({
                method:'get',
                url:URL,
                params:{
                   credentialId:this.credentialId
                }
            }).then(response=>{
                console.log(response.data);
                var code=response.data.code;
                if(code==0){
                   this.ceShiData=response.data.data;
                   var time=this.ceShiData.timeLimit;
                   var hour=parseInt(time / 3600 );
                    // time%=3600;
                   var min = parseInt(time%3600/60);
                    // time%=60;
                   var sec = parseInt(time%3600%60);
                    hour = hour > 9 ? hour : '0' + hour;
                    min = min > 9 ? min : '0' + min;
                    sec = sec > 9 ? sec : '0' + sec;
                   if(hour!=0){
                       this.ceShiHour=hour;
                   }
                   if(min!=0){
                       this.ceShiMin=min;
                   }
                   if(sec!=0){
                       this.CeShiSec=sec;
                   }
                }else{
                    console.log("no mes");  
                    Toast(response.data.msg);
                }
            }).catch(error=>{
                console.log(error);
                //Toast(error);
            })
        }
    }
}
</script>
<style>
.el-header{
    padding: 0px;
}
.el-main{
    padding: 0px;
}
.el-footer{
    padding:0px;
}
#examIntroHead{
    background-color: #53cdf5;
    color: #707070;
}
.imgCol{
    display:flex;
    align-items:center;
    justify-content:center
}
.words{
    color: #707070;
}
.examIntroTitle{
    font-size: 1.25em;
    color: #707070;
    margin-top:20px;
    margin-bottom:30px;
}
.examIntro{
    font-size: 8px;
}
.introduceBox{
    border: 1px #b0b0b0 solid;
    margin: 10px;
    padding: 10px;
    height: 200px;
}
.btnexamIntro{
    background-color: #53cdf5;
    height: 40px;
    width: 60%;
    color: #fff;
    font-size: 1.125em;
    outline: none;
    -webkit-border-radius: 25px;
    -moz-border-radius: 25px;
    -ms-border-radius: 25px;
    -o-border-radius: 25px;
    border-radius: 25px;
    border-style: none;
}
.backSize{
    height: 26px;
}
.titleSize{
    font-size:1.125em;
    color:#ffffff
}
@media screen and (max-height: 600px){
  .backSize{
      height: 22px;
  }
  .titleSize{
      font-size: 1em;
  }
}
</style>
